<template>
  <IBizGridContainer
    v-if="modelData.predefinedType === 'CONTAINER_GRID'"
    :modelData="modelData"
    :controller="controller"
  >
    <!-- #ifdef H5 -->
    <template v-slot:[panelItem.id] v-for="panelItem in modelData.panelItems" :key="panelItem.id">
      <IBizPanelDetailShell :modelData="panelItem" :container="container" :controls="controls" />
    </template>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN-->
    <template v-for="panelItem in modelData.panelItems" :key="panelItem.id">
      <IBizPanelDetailShell
        slot="{{panelItem.id}}"
        :modelData="panelItem"
        :container="container"
        :controls="controls"
      />
    </template>
    <!-- #endif  -->
  </IBizGridContainer>
  <IBizPanelContainerGroup
    v-else-if="modelData.predefinedType === 'CONTAINER_GROUP'"
    :modelData="modelData"
    :controller="controller"
  >
    <!-- #ifdef H5 -->
    <template v-slot:[panelItem.id] v-for="panelItem in modelData.panelItems" :key="panelItem.id">
      <IBizPanelDetailShell :modelData="panelItem" :container="container" :controls="controls" />
    </template>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN-->
    <template v-for="panelItem in modelData.panelItems" :key="panelItem.id">
      <IBizPanelDetailShell
        slot="{{panelItem.id}}"
        :modelData="panelItem"
        :container="container"
        :controls="controls"
      />
    </template>
    <!-- #endif  -->
  </IBizPanelContainerGroup>
  <IBizScrollContainer
    v-else-if="modelData.predefinedType === 'CONTAINER_SCROLL'"
    :modelData="modelData"
    :controller="controller"
  >
    <!-- #ifdef H5 -->
    <template v-slot:[panelItem.id] v-for="panelItem in modelData.panelItems" :key="panelItem.id">
      <IBizPanelDetailShell :modelData="panelItem" :container="container" :controls="controls" />
    </template>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN-->
    <template v-for="panelItem in modelData.panelItems" :key="panelItem.id">
      <IBizPanelDetailShell
        slot="{{panelItem.id}}"
        :modelData="panelItem"
        :container="container"
        :controls="controls"
      />
    </template>
    <!-- #endif  -->
  </IBizScrollContainer>
  <IBizPanelContainerImage
    v-else-if="modelData.predefinedType === 'CONTAINER_IMAGE'"
    :modelData="modelData"
    :controller="controller"
  >
    <!-- #ifdef H5 -->
    <template v-slot:[panelItem.id] v-for="panelItem in modelData.panelItems" :key="panelItem.id">
      <IBizPanelDetailShell :modelData="panelItem" :container="container" :controls="controls" />
    </template>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN-->
    <template v-for="panelItem in modelData.panelItems" :key="panelItem.id">
      <IBizPanelDetailShell
        slot="{{panelItem.id}}"
        :modelData="panelItem"
        :container="container"
        :controls="controls"
      />
    </template>
    <!-- #endif  -->
  </IBizPanelContainerImage>
  <IBizPanelContainer v-else :modelData="modelData" :controller="controller">
    <!-- #ifdef H5 -->
    <template v-slot:[panelItem.id] v-for="panelItem in modelData.panelItems" :key="panelItem.id">
      <IBizPanelDetailShell :modelData="panelItem" :container="container" :controls="controls" />
    </template>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN-->
    <template v-for="panelItem in modelData.panelItems" :key="panelItem.id">
      <IBizPanelDetailShell
        slot="{{panelItem.id}}"
        :modelData="panelItem"
        :container="container"
        :controls="controls"
      />
    </template>
    <!-- #endif  -->
  </IBizPanelContainer>
</template>

<script setup lang="ts">
import { IPanelContainer, IControl } from '@ibiz/model-core'
import { IPanelItemController, IViewLayoutPanelController } from '@ibiz-template/runtime'

const props = defineProps({
  modelData: {
    type: Object as PropType<IPanelContainer>,
    required: true,
  },
  controller: {
    type: Object as PropType<IPanelItemController>,
    required: true,
  },
  container: {
    type: Object as PropType<IViewLayoutPanelController>,
    required: true,
  },
  controls: {
    type: Array as PropType<
      {
        modelData: IControl
        slotProps: IData
      }[]
    >,
    default: () => [],
  },
})
</script>
